<template>
	<div class="app-page">
		<particles />
		<indexbg />
		<div class="container-fluid">
			<div class="row text-container ">
				<div class= "tm-content col-md-6 col-sm-8 col-xs-12 ml-auto section">
					<div class="content-box">
			            <div class="subscribe-form">
			       	    	<div class="row form-section">
								<div class="col-sm-8 col-xs-10">
				                      <input type="text" 
				                      	class="form-control"
				                      	 v-model="username" 
				                      	 @focus="onfocus"
				                      	 placeholder="输入您的账号"/>
				                      <div class="help-box">
										 <strong v-if="namelg">请输入您的账号!</strong>
										 <strong v-if="nousename">账号：<a>{{errname}}</a>Not Found!</strong>
									 </div>
					  			</div>
								<div class="col-sm-4 col-xs-5">
									<button  class="tm-btn-subscribe" @click="generate(username)">登录</button>
								</div>
							</div>
			            </div>
					</div>
				</div>
			</div>	
           <foot />
		</div>
	</div>	
</template>

<script>
export default {
  data(){
    return {
      list:{
      },
      username:'',
      errname:'',
      isShow:false,
      inputval:false,
      nousename:false,
      namelg:false,
      checked:false
    }
  },
  created(){
  },
  methods:{
    checkebox(){
    	 this.checked = !this.checked
    },
    generate(username){
    	let name = this.username
    	let self = this
    	if(name.length <= 0){
    		this.namelg = true
    		return
    	}else{
	        this.$axios.get('/api/users/'+ name).then((response)=>{
          	    let res = JSON.parse(JSON.stringify(response))
          	    if(res.status === 200){
          	     	this.$router.push({ 
          	     		name: 'data',
          	     		params: { user: name }
          	     	})
			      }   
			      return
		    	}).catch(err => {
		    		this.nousename = true
          	     	this.errname = name
				  console.log(err.message);
				})
            }
    	
    },
    onfocus(){
    	this.namelg = false
    	this.nousename = false
    }
  }
}
</script>

<style lang="scss">
 @import './index'
</style>